<template>
	<view class="content">
		<view class="person1">
			<view class="one">个人中心</view>
			<view class="person1_1">
				<view class="person1_2">
				</view>
				<template>
					<view class="person1_3" v-show="isLogin==true">
						欢迎你! {{username}}
					</view>
				</template>
				<template>
					<view class="person1_3" v-show="isLogin==false">
						[登录享受更多权益]
					</view>
				</template>
				<view class="wrap u-flex">
					<view class="demo-layout " v-for="(item,index) in persons_info" :key="index">
						<view style="font-size: 24rpx;padding: 10rpx 0 10rpx 30rpx ;">{{item.info1}}</view>
						<view style="padding-left: 50rpx;">{{item.info2}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="person3 ">
			<view style="padding: 20rpx;font-size: 30rpx;">
				我的订单
			</view>
			<view class="u-flex">
				<view class="person3_1">
					<image src="../../static/dfk.png" mode=""></image>
					<text>待付款</text>
				</view>
				<view class="person3_1">
					<image src="../../static/deal.png" mode=""></image>
					<text>待收货</text>
				</view>
				<view class="person3_1">
					<image src="../../static/pj.png" mode=""></image>
					<text>待评价</text>
				</view>
				<view class="person3_1">
					<image src="../../static/tk.png" mode=""></image>
					<text>待退款</text>
				</view>
			</view>
		</view>

		<view class="person2">
			<view class="person2_1 u-flex">
				<image style="width: 58rpx;height: 48rpx;margin: 30rpx;" src="../../static/list_dd.png" mode=""></image>
				<text style="font-size: 32rpx;width: 260rpx;">我的订单</text>
				<image class="jiantou" src="../../static/jiantou.png" mode="">
				</image>
			</view>
			<view class="person2_1 u-flex">
				<image style="width: 58rpx;height: 48rpx;margin: 30rpx;" src="../../static/renwu.png" mode=""></image>
				<text style="font-size: 32rpx;width: 260rpx;">任务中心</text>
				<image class="jiantou" src="../../static/jiantou.png" mode="">
				</image>
			</view>
			<view class="person2_1 u-flex">
				<image style="width: 58rpx;height: 48rpx;margin: 30rpx;" src="../../static/quan.png" mode=""></image>
				<text style="font-size: 32rpx;width: 260rpx;">优惠券</text>
				<image class="jiantou" src="../../static/jiantou.png" mode="">
				</image>
			</view>
			<view class="person2_1 u-flex">
				<image style="width: 58rpx;height: 48rpx;margin: 30rpx;" src="../../static/us.png" mode=""></image>
				<text style="font-size: 32rpx;width: 260rpx;">关于我们</text>
				<image class="jiantou" src="../../static/jiantou.png" mode="">
				</image>
			</view>
			<view class="person2_1 u-flex">
				<image style="width: 58rpx;height: 48rpx;margin: 30rpx;" src="../../static/shezhi.png" mode=""></image>
				<text style="font-size: 32rpx;width: 260rpx;">系统设置</text>
				<image class="jiantou" src="../../static/jiantou.png" mode="">
				</image>
			</view>
			<view class="person2_1 u-flex">
				<image style="width: 58rpx;height: 44rpx;margin: 30rpx;" src="../../static/loginout.png" mode=""></image>
				<text style="font-size: 32rpx;width: 260rpx;">退出登录</text>
				<image class="jiantou" src="../../static/jiantou.png" mode="">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false,
				username: '黎雪娅',
				tab1:1,
				"persons_info": [{
						"id": 1,
						"info1": "最近浏览",
						"info2": 115
					},
					{
						"id": 2,
						"info1": "我的收藏",
						"info2": 125
					},
					{
						"id": 3,
						"info1": "我的积分",
						"info2": 1115
					}
				],
			}
		},
		methods:{
		},

		
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f0f0f0;
		height: 1460rpx;
		margin: 0;
		padding: 0;
	}

	.one {
		padding: 60rpx 0 0 310rpx;
		font-size: 36rpx;
		color: #fff;
	}

	.person1 {
		width: 100%;
		height: 400rpx;
		// background-color:#64b8fb ;
		background: url("https://img95.699pic.com/xsj/2k/ow/z5.jpg!/fh/300") no-repeat;
        background-size: 100%;
		.person1_1 {
			position: relative;
			width: 92%;
			height: 260rpx;
			margin: 120rpx auto;
			background-color: #fff;
			border-radius: 40rpx;
			margin-bottom: 0rpx;
			z-index: 1000;
		}

		.person1_2 {
			position: absolute;
			top: -80rpx;
			left: 270rpx;
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			// background-color: red;
			background: url("http://m.qpic.cn/psc?/V10oAX802nNivT/ruAMsa53pVQWN7FLK88i5hvVAcSq.PYk16FRWwWjgc9QZ88lG5IaPXWl79Z77eIBMaucF8DQcsaEBM3dhn5i*dcpw9hFgkuvA9YI0wIsSuw!/b&bo=OAQ4BDgEOAQBByA!&rf=viewer_4") no-repeat;
			background-size: 160rpx;
		}

		.person1_3 {
			position: absolute;
			width: 260rpx;
			height: 60rpx;
			left: 220rpx;
			top: 90rpx;
			font-weight: 600;
			color: #f5a300;
			text-align: center;
			line-height: 60rpx;
		}
	}

	.wrap {
		padding: 50rpx 24rpx 24rpx 44rpx;
		padding-top: 150rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		width: 220rpx;
		height: 80rpx;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		// color: #3383fe;
	}

	.person2 {
		width: 92%;
		// height: 400rpx;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 40rpx;

		.person2_1 {
			width: 90%;
			height: 86rpx;
			margin: 10rpx auto;
			// background-color: green;
			border-bottom: 1px dashed #cfcfcf;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.person2_1:nth-child(6) {
		border: none;
	}

	.person3 {
		width: 92%;
		height: 230rpx;
		background-color: #fff;
		margin: 110rpx auto;
		border-radius: 40rpx;
		margin-bottom: 30rpx;
		image{
			width: 70rpx;
			height: 68rpx;
			padding:0 20rpx 10rpx 20rpx;
		}
		text{
			padding:0 20rpx 20rpx 20rpx;
		}
		.person3_1{
			width: 200rpx;
			height: 130rpx;
			// background-color: red;
			margin:0 20rpx 20rpx 20rpx;
		}
	}
	.jiantou{
		width: 48rpx;
		height: 44rpx;
		margin: 30rpx 30rpx 30rpx 280rpx;
	}
</style>
